<script setup>
const itemList = ref([
  {
    tid: 'defaultModule.text',
    icon: 'icon-wenben',
    label: '文本'
  },
  {
    tid: 'defaultModule.image',
    icon: 'icon-tupian',
    label: '图片'
  },
  {
    tid: 'defaultModule.table',
    icon: 'icon-biaodanzujian-biaoge',
    label: '表格'
  },
  {
    tid: 'defaultModule.longText',
    icon: 'icon-wenben',
    label: '长文'
  },
  {
    tid: 'defaultModule.hline',
    icon: 'icon-anjianfengexian',
    label: '横线'
  },

  {
    tid: 'defaultModule.date',
    icon: 'icon-shijian',
    label: '时间'
  },
  {
    tid: 'defaultModule.qrcode',
    icon: 'icon-erweima',
    label: '二维码'
  },
  {
    tid: 'defaultModule.barcode',
    icon: 'icon-tiaoxingma',
    label: '条形码'
  }
])
</script>
<template>
  <div class="box">
    <div class="ep-draggable-item item" :tid="item.tid" v-for="(item, index) in itemList" :key="index">
      <i :class="`iconfont ${item.icon}`" />
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.ep-draggable-item {
  margin: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .iconfont {
    font-size: 50px;
  }
}
</style>
